0
Welcome Guest! Login
0 items Join Now

Gantry 5 - Layout Customisation

    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 21595
    • Thanks: 3098
    • messin' with stuff

    Re: Gantry 5 - Layout Customisation

    Posted 6 years 7 months ago
    • So for a lot of things changing the color values on your Styles tab will effect the Particle output... pay attention to your Base and Accent Colors... sometimes the theme will derive a slightly different color based of a calculation of those values even if it's not using them directly.

      At the Particle level you can play around with Variations on the Block Settings tab:

      docs.gantry.org/gantry5/configure/layout-manager#settings-2

      or try the Variations and Classes in Requiem: demo.rockettheme.com/live/joomla/requiem...res/block-variations


      Here, however, CSS really is going to be the best way forward I think

      In Chrome (basically the same as in Mozilla, I prefer Chrome) right click on that Home icon and go to Inspect

      You'll see a <span class="g-iconmenu-icon fa fa-home fa-fw"></span> tag highlighted in your Elements pane and off the right in the Style pane you'll see:
      .g-home #g-navigation .g-iconmenu .g-iconmenu-icon, .g-homepositions #g-navigation .g-iconmenu .g-iconmenu-icon {
          color: rgba(255, 255, 255, 0.75);
      }

      just copy+paste that CSS and change the color value




      There are several ways you can add custom CSS into Gantry 5:

      On the Base Outline or Per Outline Level:

      Page Settings > Assets
      Page Settings > Atoms

      docs.gantry.org/gantry5/configure/page-settings#assets
      docs.gantry.org/gantry5/configure/page-settings#custom-css-js

      or at a global custom file level

      [template-name]/custom/scss/custom.scss

      docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet
    • The following users have thanked you: GSC_itsupport

    • SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT :woohoo:
  • Re: Gantry 5 - Layout Customisation

    Posted 6 years 7 months ago
    • Hi Matt,

      Thanks for getting back to me so quickly and thank you for the information! It's really helpfull!

      I've just given some of your suggestions a test run and am found that even though I changed the colouring for the navigation section using the 'Styles' section in Gantry Admin and that all seemed to go ok, except for that something seems to be stopping the change in the frontend... I can see my changes using the inspection tool, but some are being overridden by CSS or are just being ignored as I can't see any styling in th insepctor...

      Also, if I want to apply the same settings to my (for example) navigation area on all pages would I need to adjust all outlines in use to have the same values?

      For example, my homepage is using the Reqium Home - Positions outline, while the other pages I'm planning on building in will be using the Base outline... If I want my nagivation area to have a transparent background and #333 colour value on all pages should I apply these styles to both outlines?

      Thanks so much again!
      Sarah
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 21595
    • Thanks: 3098
    • messin' with stuff

    Re: Gantry 5 - Layout Customisation

    Posted 6 years 7 months ago
    • Correct, the template will override some core Gantry settings/styling... that's what templates do to give each release a fresh look and design so in some instances you will have to write CSS to override the template's styling.

      Your also correct on how to go about applying styles to different Outlines... you should set your Default styles on the Base Outline's Style tab so that they'll be used everywhere. Then, as you want something different on a per page or per outline basis you would override the style from that given Outline's style tab.

      That's for styles... for Particles and their settings you can actually inherit from one Outline to another. Check that out here: Inheritance
    • SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT :woohoo:
  • Re: Gantry 5 - Layout Customisation

    Posted 6 years 7 months ago
    • Hi Matt,

      Thanks for your reply!

      So now that I have applied my preferred styling for my navigation position in both my Base Outline and the Home - Positions Outline and am not seeing any results (although the inspection tool shows the new changes) I am guessing the changes I made to the Outlines in the admin section are being ignored or overridden somewhere I can't see...?
      This image is hidden for guests.
      Please log in or register to see it.


      I am guessing now, that I need to write the code into the custom.scss file instead?
      If so, are you able to advise on how best to add the code?

      Currently, my custom.scss file looks like this:
      // Gantry 5 custom CSS file
      
      /* HEADER */
      #g-header .g-container { 
        margin-top: -93px; 
      }
      
      /* RESPONSIVE BREAKPOINTS */
      // import breakpoints
      @import "dependencies";
       
      // Typical values are the default breakpoints set in Gantry 5
      // but these values are user definable in style settings
      // so that is why the code below uses mixins to get the actual 
      // values from Gantry 5 template.
       
      // commonly used media queries
       
      //  typically min 75rem 
      @include breakpoint(large-desktop-range) {
       
      }
      // typically range 60rem to 74.938rem 
      @include breakpoint(desktop-range) {
       
      }
       
      // typically 48rem to 59.938rem
      @include breakpoint(tablet-range) {
       
      }
      // typically 30rem to 47.938rem
      @include breakpoint(large-mobile-range) {
       
      }
      // typically max 30rem
      @include breakpoint(small-mobile-range) {
       
      }
       
      // Less commonly used media queries
       
      // typically min 60rem
      @include breakpoint(desktop-only) {
       
      }
      // typically min 48rem
      @include breakpoint(no-mobile) {
       
      }
      // typically max 47.938 rem
      @include breakpoint(mobile-only) {
        #g-navigation .mainnav-left .g-iconmenu-item {
          display: block;
          position: absolute;
          top: 0.8rem;
          left: 1rem;
        }
       
        #g-navigation .mainnav-right .g-iconmenu-item {
        	display: block;
        	position: absolute;
          top: 0.8rem;
          right: 1rem;
        }
        
        .g-homepositions #g-header {
          padding-top: 4rem;
        }
      }
      // typically max 59.938rem
      @include breakpoint(no-desktop) {
      	#g-header .g-container {
      	   margin-top: -24px;
      	}
      }
       
      // Mobile Menu Breakpoint
      @media only all and (max-width: $breakpoints-mobile-menu-breakpoint) { 
       
      }
       
      @import "nucleus/mixins/breakpoints";

      I have tried to add the code from the inspection screenshot above into my custom.scss file to see if that would override everything, but it didn't work either. It's showing up, just being ignored...
      This image is hidden for guests.
      Please log in or register to see it.


      What have I missed?

      Thanks again!
      Sarah
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 21595
    • Thanks: 3098
    • messin' with stuff

    Re: Gantry 5 - Layout Customisation

    Posted 6 years 7 months ago
    • I would leave the media queries at the bottom of the file along with the mixins/breakpoints/ import... put all other custom css/scss above that... if you use any SCSS variables (there's a bunch in Gantry you can hook into) that code needs to be after the "dependencies" import

      anytime you add/change something in that file you'll need to recompile CSS from the Styles tab of your Gantry 5 Dashboard... that's probably all you need to do here.
    • SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT :woohoo:
  • Re: Gantry 5 - Layout Customisation

    Posted 6 years 7 months ago
    • Hi Matt,

      Sorry, I'm ever so slightly confused... My CSS file (to me) seems like it's organised as you recommend above, but if there is anything out of whack, please let me know as I've obviously missed it!

      As to the rest of my issue - I'm still not seeing results after changing the 'navigation' colours in both Gantry Admin and/or adding that code to the custom.scss file. I can see the code in the inspector, as if the site is calling it, but it seems to be ignoring it all on some level and I can't figure out where or why...

      Can you offer any advice - at this point in time I am unable to change any colouring on the nav-bar (particularly the white text)...

      Thanks,
      Sarah
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 21595
    • Thanks: 3098
    • messin' with stuff

    Re: Gantry 5 - Layout Customisation

    Posted 6 years 7 months ago
    • Ok, I see in your screenshot now...

      #g-navigation

      is less specific than

      .g-homepositions #g-navigation

      so

      .g-homepositions #g-navigation

      is winning

      ... your compiled custom.css file will load after the template's core settings so if you copy+paste exactly (.g-homepositions #g-navigation) you will win


      worth a read: www.smashingmagazine.com/2007/07/css-spe...ngs-you-should-know/

      :)
    • Last Edit: 6 years 7 months ago by Matt.
    • SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT :woohoo:
  • Re: Gantry 5 - Layout Customisation

    Posted 6 years 7 months ago
    • Ahhh! Now I get it! Specifics for the win :)

      And yet, it still seems to be ignoring me. Am I missing another syntax?

      Link is here again if you need it

      Not only do I have the settings on in the Home - Positions Outline, I also have the same code listed in my custom.scss file and neither of them are working (although as before, you can see them in the Inspection)...

      This is so weird for me to not be able to pinpoint this!
    • Last Edit: 6 years 7 months ago by GSC_itsupport.
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 21595
    • Thanks: 3098
    • messin' with stuff

    Re: Gantry 5 - Layout Customisation

    Posted 6 years 7 months ago
    • I'm not 100% sure what you're trying to do... just trying to follow your screen shots... looks like you're overriding yourself now

      I'm headed to bed shortly, but I'll check back in the morning.
    • SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT :woohoo:
  • Re: Gantry 5 - Layout Customisation

    Posted 6 years 7 months ago
    • Hi Matt,

      Sorry, I see where everything was getting confused.

      I've been troubleshooting other issues on the Forum and obviously I haven't noticed when someone has added some new code in for me and I've duplicated in some places...

      Right, so starting from scratch...I have removed all my Navigation styling code from the custom.scss file and the only code in there for the Navigation section is a solution from Mr. T for another issue.

      I have gone into the Home - Positions Outline and set this styling for the Navigation section:
      This image is hidden for guests.
      Please log in or register to see it.


      I have also set the same styling in the Base Outline (which I can confirm, works on the Test Page I just created under HOME)...

      But the Homepage doesn't show the styling, even though it appears in the inspection tool:
      This image is hidden for guests.
      Please log in or register to see it.


      Do you have any idea what's going on? I'm at a loss.
      Even if I add the colour styling back into my custom.scss file, it is still ignored by the homepage...

      I hope I'm making sense with all of this - sorry to keep pestering you! :)


      It's Friday afternoon here in Australia and I'm just about to finish for the day, plus we have a long weekend this weekend so I won't be back on for a couple of days.

      Feel free to jump on my site with the details above and have a poke around if you feel that would be more worthwhile than me constantly confusing you! You'll see from the Settings in the Gantry 5 Admin for the Base and Home - Positions Outlines what I'm trying to achieve with my colouring...

      Thanks for you patience and help so far - Enjoy your weekend! :)
      Sarah

Time to create page: 0.046 seconds